<template>
  <div class="app-container">
    <el-card class="help-center-container">
      <el-tabs v-model="addType" @tab-click="handleClick">
        <el-tab-pane label="平台管理" name="platform">
          <PlatformTable v-if="addType === 'platform'" :type="addType" />
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="role">
          <RoleTable v-if="addType === 'role'" :add-visible.sync="roleVisible" :type="addType" />
        </el-tab-pane>
        <el-tab-pane label="菜单管理" name="menu">
          <MenuTable v-if="addType === 'menu'" :add-visible.sync="menuVisible" :type="addType" />
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="log">
          <OperateLog v-if="addType === 'log'" />
        </el-tab-pane>
        <el-tab-pane label="登录日志" name="login">
          <LoginLog v-if="addType === 'login'" />
        </el-tab-pane>
      </el-tabs>

      <el-button
        v-if="addType !== 'log' && addType !== 'login'"
        type="primary"
        class="help-center-container-button"
        @click="goAddContent"
      >
        {{ addTypeText }}
      </el-button>
    </el-card>
  </div>
</template>
<script>
import PlatformTable from './component/PlatformTable.vue'
import RoleTable from './component/RoleTable.vue'
import MenuTable from './component/MenuTable.vue'
import OperateLog from '../log/OperationLog.vue'
import LoginLog from '../log/LoginLog.vue'
import { mapActions } from 'vuex'
export default {
  name: 'SystemAdmin',
  components: {
    MenuTable,
    RoleTable,
    LoginLog,
    OperateLog,
    PlatformTable
  },
  data() {
    return {
      roleVisible: false,
      menuVisible: false,
      addType: 'platform'
    }
  },
  computed: {
    addTypeText() {
      const obj = {
        platform: '添加管理员',
        role: '添加角色',
        menu: '添加菜单'
      }
      return obj[this.addType]
    }
  },
  created() {
    this.initAddType()
    this.getRoleSelect()
  },
  methods: {
    ...mapActions('base', ['getRoleSelect']),
    handleClick({ name }) {
      this.addType = name
      this.getRoleSelect()
    },
    goAddContent() {
      if (this.addType === 'platform') {
        this.$router.push({ path: '/setting/system_admin/add_admin' })
      } else if (this.addType === 'role') {
        this.roleVisible = true
      } else {
        this.menuVisible = true
      }
    },
    initAddType() {
      const { addType } = this.$route.query
      if (addType) {
        this.addType = addType
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.help-center-container {
  position: relative;
  &-button {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
</style>
